<template>
  <div id="banner" :class="{'home-banner':isHome}">
    <div class="banner-img" :style="{'background-image': `url(${src})`}">
      <template v-if="isHome">
        <!--左右倾斜-->
        <div class="slant-left"></div>
        <div class="slant-right"></div>
      </template>
    </div>
  </div>
</template>

<script>
// import img from '../assets/background.jpg'
export default {
  name: "banner",
  props: {
    src: {
      type: String,
      default: 'https://team-pic.oss-cn-beijing.aliyuncs.com/simple-blog/1639660702147.jpg'
    },
    isHome: {
      type: [Boolean, String],
      default: false
    }
  },
}
</script>

<style scoped lang="less">
#banner {
  position: relative;
  margin-top: 0;
  width: 100%;
  height: 230px;
  .banner-img {
    width: inherit;
    height: inherit;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: all 1s linear;
    overflow: hidden;
    &:hover {
      transform: scale(1.1, 1.1);
      filter: contrast(130%);
    }
  }
  &.home-banner {
    height: 230px;
    .banner-img {
      background-position: top;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100% auto;
      z-index: -1;
      transition: unset;
      // width: inherit;
      // height: inherit;
      // background-position: center center;
      // background-size: cover;
      // background-repeat: no-repeat;
      // background-attachment: fixed;
      // transition: all 1s linear;
      // overflow: hidden;
      // z-index: -1;

      &:hover {
        transform: unset;
        filter: unset;
        // transform: scale(1.1, 1.1);
        // filter: contrast(130%);
      }
    }
    .slant-left {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-bottom: 100px solid #fff;
      border-right: 800px solid transparent;
      left: 0;
      bottom: 0;
    }
    .slant-right {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-bottom: 100px solid #fff;
      border-left: 800px solid transparent;
      right: 0;
      bottom: 0;
    }
  }
}

</style>
